<template>
    <div class="item">
        <div @click.stop="handleClick(item)"
             :class="['item-content', { checked: item.checked }]"
             :style="{ paddingLeft: indentLeft + 'px' }"
        >
            <span v-if="!item.expand">↑</span>
            <span v-else>↓</span>
            <span>{{ item.val}}</span>
        </div>
        <div v-if="item.expand && item.children.length" class="item-children">
            <!-- 组件递归（自己的内部调自己） -->
            <tree-item
                v-for="child in item.children"
                :key="child.key"
                :item="child"
                :checkbox="checkbox"
            />
        </div>
    </div>
</template>

<script>
export default {
    name: "TreeItem",
    props: {
        item: {
            type: Object,
            default: () => ({
                key: '',
                val: '',
                indent: 0,
                expand: false,
                checked: false,
                disabled: false,
                children: []
            })
        },
        checkbox: {
            type: Boolean,
            default: false
        }
    },
    computed: {
        indentLeft() {
            return this.item.indent * 30;
        }
    },
    methods: {
        handleClick(item) {
            console.log(item,'item')

            if (this.item.disabled) {
                return;
            }

            if(!item.checked){
                console.log('444')
            }
            
            if (!this.item.children.length && this.checkbox) {
                this.item.checked = !this.item.checked;
            }
            this.item.expand = !this.item.expand;
        }
    }
}
</script>

<style lang="less" scoped>
.item {
    .item-content {
        &:hover {
            cursor: pointer;
            background-color: #efefef;
        }
        &.checked {
            background-color: #3d85c6;
        }
    }
}
</style>